<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<style type="text/css"> 
body{font:"宋体";font-size:12px;} 
*{margin:0;padding:0;}

.mybutton{margin-left:10px; width:70px;}
.tablelist{margin:0 auto;width:600px;border-collapse:collapse;margin-top:15px;}
.tableheader td{border:1px solid #BCE2F3;height:20px;background:#E4F2FB;text-align:center;}
.tableline{border:1px solid #BCE2F3;height:20px;}
.tableline td{border:1px solid #BCE2F3;}
.jumppage{width:600px;float:left;margin-left:59px;text-align:right;margin-top:10px;}

</style>

<script>
var table_row_num = 10;
var cur_page = 1;
var total_page;

function addkeyreply(){
	var key = document.getElementById("input_keyword").value;
	var reply = document.getElementById("input_reply").value;
	
	if (key.length == 0 || reply.length == 0){
		document.getElementById("input_msg").innerHTML = "keyword and reply can not be null";
		return;
	}
	
	var linenum = 0;
	for (var i=1; i<=table_row_num; i++){
		var num = document.getElementById("keywordtable").rows[i].cells[0].innerHTML;
		document.getElementById("input_msg").innerHTML = i;
		if (num == ""){
			linenum = i - 1;
			break;
		}

	}

	if (linenum != table_row_num){
		document.getElementById("keywordtable").rows[linenum+1].cells[0].innerHTML = linenum+1;
		document.getElementById("keywordtable").rows[linenum+1].cells[1].innerHTML = key;
		document.getElementById("keywordtable").rows[linenum+1].cells[2].innerHTML = reply;
	}
}

function createXmlHttpObject(){
	var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
}

function loaddata(page, num){
    var xmlhttp = createXmlHttpObject();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
        	
        	if (xmlhttp.responseText.length != 0){
        		refreshTable();
        		var check = "check";
        		var tables = eval(xmlhttp.responseText);
        		for (var i=0; i<tables.length; i++){
        			if (i == 0){
        				total_page = tables[i].total_page;
        				if (page == -1){
        		        	cur_page = total_page;
        				}
        			} else {
        				document.getElementById(check + i).disabled=false;
        			    document.getElementById("keywordtable").rows[i].cells[1].innerHTML = tables[i].index;
        			    document.getElementById("keywordtable").rows[i].cells[2].innerHTML = decodeURIComponent(tables[i].key.replace(/\+/g, '%20'));
        			    document.getElementById("keywordtable").rows[i].cells[3].innerHTML = decodeURIComponent(tables[i].reply.replace(/\+/g, '%20'));
        			    document.getElementById("keywordtable").rows[i].cells[4].innerHTML = tables[i].id;
        			}
        		}
        		
        		
        	}
        }
    }
    
    var url = "<%=request.getContextPath()%>/DataLoadServlet?page=" + page + "&num=" + num;
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

function refreshTable(){
	var check = "check";
	for (var i=1; i<=table_row_num; i++){
		document.getElementById(check + i).checked = false;
		document.getElementById(check + i).disabled = true;
		document.getElementById("keywordtable").rows[i].cells[1].innerHTML = "";
		document.getElementById("keywordtable").rows[i].cells[2].innerHTML ="";
		document.getElementById("keywordtable").rows[i].cells[3].innerHTML = "";
	}
}

function adddata(){
	var key = document.getElementById("input_keyword").value;
	var reply = document.getElementById("input_reply").value;
	var xmlhttp = createXmlHttpObject();

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
        	loaddata(-1,table_row_num);
        }
    }
    
    var url = "<%=request.getContextPath()%>/KeyAddServlet?key=" + encodeURI(encodeURI(key)) + "&reply=" + encodeURI(encodeURI(reply));
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

function jumptopage(act){
	
	switch(act){
		case 1:
			if (cur_page != 1){
				loaddata(1, table_row_num);
				cur_page=1;
			}
			break;
		case 2:
			if (cur_page > 1){
				loaddata(cur_page-1, table_row_num);
				cur_page = cur_page - 1;
			}
			break;
		case 3:
			if (cur_page < total_page){
				loaddata(cur_page+1, table_row_num);
				cur_page = cur_page + 1;
			}
			break;
		case 4:
			if (cur_page != total_page){
				loaddata(total_page, table_row_num);
				cur_page = total_page;
			}
			break;
		default:
			break;
	}
}

function delete_row(){
	var check = "check";
	var id_list = "";
	var delete_cnt = 0;
	
	for (var i=1; i<=table_row_num; i++){
		if (document.getElementById(check + i).checked){
			var id = document.getElementById("keywordtable").rows[i].cells[4].innerHTML;
			if (id_list == ""){
				id_list = id;
			} else {
				id_list = id_list + "," + id;
			}
			delete_cnt++;
		}
	}
	
	if (id_list == ""){
		alert("请选择要删除的行");
		return;
	}
	
	var a = confirm("确认删除？")
	if (a == false){
		return;
	}
	
	var xmlhttp = createXmlHttpObject();

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
        	var show_page = (delete_cnt == table_row_num)?(cur_page-1):cur_page;
        	if (show_page == 0){
        		show_page = 1;
        	}
        	loaddata(show_page, table_row_num);
        }
    }
	
    var url = "<%=request.getContextPath()%>/KeyDeleteServlet?id=" + id_list;
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}
</script>

</head>


<body onload='loaddata(1,table_row_num)'>
	<button type="button" style="margin-left:56px;" class="mybutton" onclick="adddata()">新增</button>
	<label id="input_msg"></label>
	<table id="keyinput" class="tablelist">
		<tr class="tableline" >
			<td style="text-align:center;">关键词</td>
			<td><input type="text" id="input_keyword" name="nkeyword" style="width: 100%"/></td>
		</tr>
		<tr class="tableline" >
			<td style="text-align:center;">回复</td>
			<!-- <td><input type="text" id="input_reply" name="nreply" style="width: 100%"/></td> --> 
			<td><textarea id="input_reply" name="MSG" style="width: 100%" cols=40 rows=4></textarea></td>
		</tr>
	</table>
	</br>
	
    <button type="button" style="margin-left:56px;" class="mybutton" onclick="delete_row()">删除</button>
	<table id="keywordtable" class="tablelist" >
		<tr class="tableheader" >
		    <td width="20"></td>
			<td width="20">#</td>
			<td width="200">关键词</td>
			<td width="200">回复</td>
		</tr>
		<tr class="tableline" ><td><input type="checkbox" id="check1" disabled="true"></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check2" disabled="true"></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check3" disabled="true"></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check4" disabled="true"></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check5" disabled="true"></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check6" disabled="true"></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check7" disabled="true"></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check8" disabled="true"></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check9" disabled="true"></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check10" disabled="true"></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
	</table>
			
	<span class="jumppage">
		<a href="javascript:void(0)" onclick="jumptopage(1)">第一页&nbsp;</a>
		<a href="javascript:void(0)" onclick="jumptopage(2)">上一页&nbsp;</a>
		<a href="javascript:void(0)" onclick="jumptopage(3)">下一页&nbsp;</a>
		<a href="javascript:void(0)" onclick="jumptopage(4)">最后页&nbsp;</a>
	</span>
</body>
</html>